<template>
<div class="product">
	<div class="product-main">
		<div class="full-width case-health">
			<c-head :nav="nav"></c-head>
			<div class="wrap-width table">
				<!-- <div class="mid midwrapper">
					<span>食谱</span>
					<P>2000+食谱数据、个性食谱推荐…</P>
				</div> -->
				<img src="../assets/img/banner1.jpg" style="width:100%;">
			</div>
		</div>
		<div class="blank"></div>
		<div class="full-width case-test">
			<div class="wrap-width table">
				<!-- <div class="mid midwrapper">
					<span>测评</span>
					<P>知识测评、健康测评、趣味测评</P>
				</div> -->
				<img src="../assets/img/banner2.jpg" style="width:100%;">
			</div>
		</div>
		<div class="blank"></div>
		<div class="full-width jiyin">
			<div class="wrap-width table">
				<!-- <div class="mid midwrapper">
					<span>测评</span>
					<P>知识测评、健康测评、趣味测评</P>
				</div> -->
				<img src="../assets/img/banner3.jpg" style="width:100%;">
			</div>
		</div>
		<div class="blank"></div>
		<div class="full-width tiyan">
			<div class="wrap-width table">
				<!-- <div class="mid midwrapper">
					<span>测评</span>
					<P>知识测评、健康测评、趣味测评</P>
				</div> -->
				<img src="../assets/img/tiyan.png" style="width:100%;">
			</div>
		</div>
		<div class="blank"></div>
	</div>
	<foot class="foot"></foot>
</div>
</template>
<script>
    import head from '@/components/head'
    import foot from '@/components/footer'
    export default {
        data(){
            return {
                nav: 2
            }
        },
        created() {
            var numberOfEntries = window.history.length
            console.log('num  ' + numberOfEntries)
        },
        components: {
            cHead: head,
            foot
        }
    }
</script>
<style lang="stylus" rel="stylesheet/stylus">
@media screen and (min-width: 600px) and (max-width: 800px)
	.product
		.product-main
			margin-bottom -100px
			.case-health
			// 	height 380px
				// .table
				// 	height 300px
				.midwrapper
					span
						font-size 30px
					p
						font-size 20px
			.case-test
				// height 230px
				.midwrapper
					span
						font-size 30px
					p
						font-size 20px				
@media screen and (min-width: 450px) and (max-width: 600px)
	.product
		.product-main
			margin-bottom -90px
			.case-health
				// height 265px
				// .table
					// height 185px
				.midwrapper
					span
						font-size 23px
					p
						font-size 18px
			.case-test
				// height 190px
				.midwrapper
					span
						font-size 23px
					p
						font-size 18px			
@media screen and (max-width: 450px)
	.product
		.product-main
			margin-bottom -90px
			.case-health
				// height 195px
				// .table
					// height 145px
				.midwrapper
					span
						font-size 20px
					p
						font-size 16px
			.case-test
				// height 175px
				.midwrapper
				 	span
						font-size 20px
					p
						font-size 16px
.product-main
	min-height 100vh
	.case-health
		// height 650px
		// background-image url('../assets/img/banner1.jpg')
		// background-repeat no-repeat
		// background-size cover
		// background-position center
		background-color #f2a16c
	.case-test
		// height 550px
		// background-image url('../assets/img/banner2.jpg')
		// background-repeat no-repeat
		// background-size cover
		// background-position center
		background-color #70a1ee
	.jiyin
		background-image url('../assets/img/jiyin4.jpg')
		background-repeat repeat
	.tiyan
		background-image url('../assets/img/tiyan-bg.jpg')
		background-repeat no-repeat
		background-size cover
		background-position center
	.midwrapper
		span
			font-size 60px
			line-height 1
			display inline-block
		p
			font-size 38px
			line-height 3

</style>
